<!--
 * @Descripttion: 选择招商经理
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-26 17:12:01
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-08-10 09:39:48
-->
<template>
  <Popup
    class="termination"
    v-model:show="popShow"
    title="选择招商经理"
    position="bottom"
    @confirm="onSubmit"
    @cancel="onClear"
  >
    <div class="content">
      <Scroll vertical height="100%">
        <div class="list" v-for="v in list" :key="v.id">
          <div class="left">
            <div class="name">
              {{ v.managerName }} <span>{{ v.managerPhone }}</span>
            </div>
            <div class="desc">{{ v.managerAccount }}</div>
          </div>
          <div class="right" @click="handleSelect(v)">
            <img src="@/assets/images/radio-check.png" alt="" v-if="selectData && selectData.id === v.id" />
            <img src="@/assets/images/radio.png" alt="" v-else />
          </div>
        </div>
      </Scroll>
    </div>
  </Popup>
</template>
<script lang="ts">
  import { reactive, toRefs, computed, getCurrentInstance, defineComponent } from 'vue'
  import Popup from '@/components/Popup/index.vue'
  import Scroll from '@/components/Scroll/index.vue'
  // import { Toast } from 'qmp-component'
  import { allotItem } from '@/apis/attractInvestment/potentialCustomer'
  import { getManagetList } from '@/apis/attractInvestment/leasingManager'

  const none: any[] = [undefined, null, '']

  export default defineComponent({
    name: 'Allocation',
    components: { Popup, Scroll },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      detailData: {
        type: [String, Object],
        default: ''
      },
      title: {
        type: String,
        default: ''
      }
    },
    setup(props: any, ctx: any) {
      const { proxy }: any = getCurrentInstance()

      interface datasModle {
        selectData: any
        list: any[]
      }

      const datas = reactive<datasModle>({
        selectData: '',
        list: []
      })
      const popShow = computed({
        set(val) {
          ctx.emit('update:show', val)
        },
        get() {
          return props.show
        }
      })

      const loadList = async () => {
        const filtersRaw: object[] = [
          { id: 'enable', property: 'enable', value: 1, operator: '=' },
          { id: 'dr', property: 'dr', value: 0, operator: '=' }
        ]

        const paramsData = {
          page: 1,
          rows: 50,
          sort: 'lastUpdateTime',
          order: 'desc',
          filtersRaw,
          paramsRaw: {},
          sortersRaw: [],
          pageFlag: false
        }
        getManagetList(paramsData).then((res) => {
          const resData = res.data
          datas.list = resData.records
        })
      }

      const handleSelect = (row: any) => {
        console.log('选择招商经理', row)
        datas.selectData = row
      }

      const onSubmit = () => {
        if (none.includes(datas.selectData)) {
          proxy.$toast('请选择招商经理')
          return
        }
        const data = { intendedCustomerId: props.detailData.id, investmentManagerId: datas.selectData.id }
        allotItem(data)
          .then((res: any) => {
            if (res.success === 1) {
              proxy.$toast('分配成功')

              proxy.$SimpleEvents.emit('refreshCustomerChangeItem')
              ctx.emit('success')
              popShow.value = false
            }
          })
          .catch((e) => {
            if (e) proxy.$toast(e || '终止失败')
          })
      }
      const onClear = () => {
        popShow.value = false
      }

      loadList()

      return {
        ...toRefs(datas),
        popShow,
        onClear,
        onSubmit,
        handleSelect
      }
    }
  })
</script>

<style lang="less" scoped>
  .content {
    margin: 24px 14px 24px;
    overflow: hidden;
    height: 40vh;
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      .left {
        .name {
          font: var(--font-main-strengthen);
          color: var(--texticon-default-strong);

          span {
            margin-left: 4px;
            font: var(--font-main-body);
            color: var(--texticon-default-stronger);
          }
        }
        .desc {
          margin-top: 4px;
          font: var(--font-point);
          color: var(--texticon-default-stronger);
        }
      }

      .right {
        img {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
</style>
